// 找到box元素
const box = document.getElementsByClassName('box')[0]
// 创建一个ul元素
const ul = document.createElement('ul')
// 设置ul的类名list
ul.className = 'list'
for (let i = 1; i <= 6; i++) {
  // 创建6个li
  let li = document.createElement('li')
  li.className = 'img-box'
  // 创建li中的img
  let img = document.createElement('img')
  img.src = './img/' + i + '.jpg'
  img.className = 'img'
  // 拼接li到ul中
  li.appendChild(img)
  ul.appendChild(li)
}
// 拼接ul到box中
box.appendChild(ul)

// 创建遮罩层
const cover = document.createElement('div')
cover.className = 'cover'
const bigImg = document.createElement('img')
bigImg.className = 'big-img'
bigImg.src = './img/1.jpg'
const close = document.createElement('span')
close.innerHTML = '×'
close.className = 'close'
cover.appendChild(bigImg)
cover.appendChild(close)
box.appendChild(cover)

// 点击close关闭遮罩层
close.onclick = function () {
  cover.style.display = 'none'
}
// 找所有的li中的img
let boxImg = Array.from(document.querySelectorAll('.img-box>.img'))
// 遍历图片数组
boxImg.forEach((item) => {
  // 绑定点击事件
  item.onclick = function () {
    // 获得当前图片的属性src
    let imgSrc = this.src
    cover.style.display = 'flex'
    bigImg.setAttribute('src', imgSrc)
  }
})
